<template>
	<div class="mask" v-if="showToast">
		{{message}}
	</div>
</template>

<script>
	export default {
		data() {
			return {
				showToast: false,
				message: '错误提示'
			};
		},
		methods: {
			showMessage(message) {
				this.message = message;
				this.showToast = true;
				setTimeout(() => {
					this.showToast = false;
				}, 3000)
			}
		}
	}
</script>

<style>
.mask {  
  position: fixed;  
  top: 50%; /* 从顶部偏移50% */  
  left: 50%; /* 从左侧偏移50% */  
  transform: translate(-50%, -50%); /* 相对于自身宽度和高度的50%进行偏移，实现居中 */  
  width: auto; /* 如果你想让Toast宽度自适应内容，可以设置为auto */  
  max-width: 80vw; /* 或者设置一个最大宽度限制 */  
  height: auto; /* 同理，如果你想让Toast高度自适应内容，可以设置为auto */  
  border-radius: 10px; /* 使用固定像素值代替视窗宽度的百分比，以便在不同屏幕大小下保持一致 */  
  background-color: rgba(0, 0, 0, 0.4);  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
  color: #eee;  
  padding: 20px; /* 添加内边距以改善可读性 */  
  box-sizing: border-box; /* 确保宽度和高度包含内边距和边框 */  
  z-index: 9999; /* 确保Toast显示在其他内容之上 */  
}
</style>